import geopandas as gpd
import fiona
import geopandas as gpd
import matplotlib.pyplot as plt
#import folium
import folium
from folium import plugins
from folium.plugins import MeasureControl
import pandas as pd
import requests
import numpy as np
import pdvega # adds vgplot attribute to pandas
from vega import VegaLite
import json
import altair as alt
#open file geoJSON
bdl_geojson = r'Geospatial/bandarlampung/ADMINISTRASIKECAMATAN_AR_50K.geojson'
#buat gdf dari file GeoJSON
bdl_geogdf = gpd.read_file(bdl_geojson, driver='GeoJSON')
#open file json
bdl_json = r'Geospatial/bandarlampung/ADMINISTRASIKECAMATAN_AR_50K.json'
#buat gdf dari file json
bdl_gdf = gpd.read_file(bdl_json, driver='TopoJSON')
#Prepare GeoDataFrame for Altair
# dump as json
bdl_gdf_json = bdl_gdf.to_json()
# load as a GeoJSON object.
bdl_json_features = json.loads(bdl_gdf_json)
# parse variable `features` from json_features to `alt.Data`
bdl_data_geo = alt.Data(values=bdl_json_features['features'])
m = folium.Map(location=[-5.443251942283236, 105.27673629553274],
zoom_start=12,
tiles = 'Stamen Color',
attr = 'Esri',
name = 'Esri Satellite',
control_scale = True
)
def style_function(feature):
NAMOBJ = str(feature['properties']['NAMOBJ'])
return {
'fillOpacity': 0.5,
'weight': 0.5,
'fillColor': '#005f73' if NAMOBJ == 'BUMIWARAS' \
else '#0a9396'if NAMOBJ == 'ENGGAL'\
else '#94d2bd'if NAMOBJ == 'GEDONGTATAAN'\
else '#e9d8a6'if NAMOBJ == 'JATIAGUNG'\
else '#ee9b00'if NAMOBJ == 'KATIBUNG'\
else '#ca6702'if NAMOBJ == 'KEDAMAIAN'\
else '#ae2012'if NAMOBJ == 'KEDATON'\
else '#d00000'if NAMOBJ == 'KEMILING'\
else '#2a9d8f'if NAMOBJ == 'LABUHANRATU'\
else '#e9c46a'if NAMOBJ == 'LANGKAPURA'\
else '#f4a261'if NAMOBJ == 'MERBAUMATARAM'\
else '#e76f51'if NAMOBJ == 'NATAR'\
else '#b5e48c'if NAMOBJ == 'PADANGCERMIN'\
else '#ff006e'if NAMOBJ == 'PANJANG'\
else '#8338ec'if NAMOBJ == 'RAJABASA'\
else '#3a86ff'if NAMOBJ == 'SUKABUMI'\
else '#fb5607'if NAMOBJ == 'SUKARAME'\
else '#1b4332'if NAMOBJ == 'TANJUNGBINTANG'\
else '#ffd60a'if NAMOBJ == 'TANJUNGKARANG BARAT'\
else '#2f6690'if NAMOBJ == 'TANJUNGKARANG PUSAT'\
else '#ccff33'if NAMOBJ == 'TANJUNGKARANG TIMUR'\
else '#008000'if NAMOBJ == 'TANJUNGSENANG'\
else '#ffff00'if NAMOBJ == 'TELUKBETUNG BARAT'\
else '#00ffff'if NAMOBJ == 'TELUKBETUNG SELATAN'\
else '#ff0000'if NAMOBJ == 'TELUKBETUNG TIMUR'\
else 'brown'if NAMOBJ == 'TELUKBETUNG UTARA'\
else 'blue'if NAMOBJ == 'WAYHALIM'\
else 'orange'if NAMOBJ == 'WAYLIMA'\
else 'red'
}
# Add dark and light mode.
folium.TileLayer('cartodbdark_matter',name="dark mode",control=True).add_to(m)
folium.TileLayer('cartodbpositron',name="light mode",control=True).add_to(m)
#highlight function
highlight_function = lambda x: {'fillColor': 'white',
'color':'#000000',
'fillOpacity': 0.20,
'weight': 0.1}
gjson = folium.GeoJson(bdl_json_features,
style_function=style_function,
highlight_function=highlight_function,
name="Administrasi Bandarlampung",
tooltip=folium.features.GeoJsonTooltip(
fields=['NAMOBJ','Shape_Area'],
aliases=['Nama','Luas Area'],
style=("background-color: white; color: #333333; font-family: arial; font-size: 12px; padding: 10px;")
)
).add_to(m)
#FOLIUM
#buat grafik
scatter = alt.Chart(bdl_data_geo).mark_bar(
fill='lightgray',
stroke='white'
).properties(
projection={'type': 'albersUsa'},
width=300,
height=150
).encode(
alt.Y('properties.Shape_Area:Q'),
alt.X('properties.NAMOBJ:N'),
alt.Color('properties.Shape_Area:Q')
)
vega = folium.features.VegaLite(
scatter,
width="100%",
height="100%",
)
#buat marker
marker = folium.features.Marker([-5.443251942283236, 105.27673629553274]) #buat marker
popup = folium.Popup() #buat wadah popup
vega.add_to(popup) #tambahkan chart vega ke popup
popup.add_to(marker) #tambahkan popup ke marker
marker.add_to(m)
m.add_child(MeasureControl(position="topleft"))
#membuat minimap menjadi fullscreen
plugins.Fullscreen(position='topleft').add_to(m)
#menggambar/interaktif map
draw = plugins.Draw(
export=True,
position="topleft"
)
draw.add_to(m)
#untuk menampilkan lonlang
m.add_child(folium.LatLngPopup())
plugins.LocateControl().add_to(m)
# We add a layer controller.
folium.LayerControl(collapsed=True).add_to(m)
m
from branca.element import Template, MacroElement
template = """
{% macro html(this, kwargs) %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#maplegend" ).draggable({
start: function (event, ui) {
$(this).css({
right: "auto",
top: "auto",
bottom: "auto"
});
}
});
});
</script>
</head>
<body>
<div id='maplegend' class='maplegend'
style='position: absolute; z-index:9999; border:2px solid grey; background-color:rgba(255, 255, 255, 0.8);
border-radius:6px; padding: 10px; font-size:14px; right: 20px; bottom: 20px;'>
<div class='legend-title'>Legend (draggable!)</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:red;opacity:0.7;'></span>Rendah</li>
<li><span style='background:orange;opacity:0.7;'></span>Sedang</li>
<li><span style='background:green;opacity:0.7;'></span>Luas</li>
</ul>
</div>
</div>
</body>
</html>
<style type='text/css'>
.maplegend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight: bold;
font-size: 90%;
}
.maplegend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.maplegend .legend-scale ul li {
font-size: 80%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
}
.maplegend ul.legend-labels li span {
display: block;
float: left;
height: 16px;
width: 30px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
}
.maplegend .legend-source {
font-size: 80%;
color: #777;
clear: both;
}
.maplegend a {
color: #777;
}
</style>
{% endmacro %}"""
macro = MacroElement()
macro._template = Template(template)
m.get_root().add_child(macro)